<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@page import="dao.Orders" %>
<%@page import="model.OrderViewModel" %>

Ext.Loader.setConfig({
    enabled: true
});
Ext.Loader.setPath('Ext.ux', './ux');

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.state.*',
    'Ext.form.*',
    'Ext.ux.CheckColumn'
]);

Ext.onReady(function(){
    // Define our data model
    Ext.define('Orders', {
        extend: 'Ext.data.Model',
        fields: [
            'id',
            'date',
            'date_taken',
            'status',
            'cus_name'
        ]
    });

    // Generate mock data
    var data = (function() {
            data = [];
            <%
            	String status = session.getAttribute("status") == null ? "-1" : (String)session.getAttribute("status");
            	String stt2 = request.getParameter("stt");
            	if(stt2 != null){
            		status = stt2;
            	}
            	Orders p = new Orders();
            	for(OrderViewModel pm:p.getOrders(Integer.parseInt(status))){
            		String stt = "";
            		if(pm.getStatus() == 0){
            			stt = "Chưa thanh toán";
            		}else if(pm.getStatus() == 1){
            			stt = "Chưa giao hàng";
            		}else if(pm.getStatus() == 2){
            			stt = "Đã giao hàng";
            		}
            %>
                data.push({
                    id : '<%=pm.getId() %>',
                    date: '<%=pm.getDate() %>',
                    date_taken: <%=pm.getDateTaken() %>,
                    status: '<%=stt%>',
                    cus_name: '<%=pm.getCustomerName() %>'
                });
            <%
            }
             %>   
        return data;
    })();

    // create the Data Store
    var store = Ext.create('Ext.data.Store', {
        // destroy the store if the grid is destroyed
        autoDestroy: true,
        model: 'Orders',
        proxy: {
            type: 'memory'
        },
        data: data,
        sorters: [{
            property: 'start',
            direction: 'ASC'
        }]
    });
	//create store to show type of hoa don
	var status = Ext.create('Ext.data.Store', {
	    fields: ['name', 'value'],
	    data : [
	        {"name":"Tất cả", "value":"-1"},
	        {"name":"Chưa thanh toán", "value":"0"},
	        {"name":"Chưa giao hàng", "value":"1"},
	        {"name":"Đã giao hàng", "value":"2"}
	    ]
	});
   
    // create the grid and specify what field you want
    // to use for the editor at each column.
    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        columns: [{
	            header: 'Mã hóa đơn',
	            dataIndex: 'id',
	            width: '12.5%',
	            flex: 1,
	            editor: {
	            	//disabled: true,
	                allowBlank: false
            	}
	        }, 
	        {
	            header: 'Ngày lập',
	            dataIndex: 'date',
	            width: '12.5%',
	            editor: {
	                allowBlank: false,
	            }
	        }, 
        	{
	            header: 'Ngày giao hàng',
	            dataIndex: 'date_taken',
	            flex: 1,
	            width: '12.5%',
	            editor: {
	                		allowBlank: false,
	            		}
        	},
        	{
	            header: 'Tình trạng',
	            dataIndex: 'status',
	            flex: 1,
	            width: '12.5%',
	            editor: {
	                		allowBlank: false,
	            		}
        	},
        	{
	            header: 'Tên khách hàng',
	            dataIndex: 'cus_name',
	            flex: 1,
	            width: '12.5%',
	            editor: {
	                		allowBlank: false,
	            		}
        	}
        ],
        renderTo: 'list-orders',
        width: '100%',
        height: 400,
        title: 'Hóa đơn',
        iconCls: 'order',
        frame: true,
        tbar: [
        {
        	itemId: 'editProduct',
            text: 'Xem chi tiết',
            iconCls: 'order-remove',
            handler: function() {
            	var sm = grid.getSelectionModel();
		        //[0] là dòng, [1] là cột
				var Id = sm.getSelection()[0].get('id');
            	new Ext.Window({
	            	title: 'Chi tiết hóa đơn',
	                closable: true,
	                closeAction: 'hide',
	                width: 400,
	                height: 250,
	                y: 100,
                	resizable: true,
                	layout: {
	                    type: 'anchor',
	                    padding: 5,
                	},
	                html: '<iframe src="./order-detail.jsp?id=' + Id + '" scrolling="yes" frameborder="0" width="400" height="400"></iframe>'
				}).show();
            },
            disabled: true
        },
        {
        	xtype: 'combobox',
        	fieldLabel: 'Tình trạng hóa đơn',
        	store: status,
        	queryMode: 'local',
        	displayField: 'name',
        	valueField: 'value',
        	value: '<%=status %>',
        	height: 30,
        	style:{
        		marginTop : '5px',
        		'font-size': '11px'
        	},
        	listeners: {
        		// xu ly su kien thay doi du lieu
        		'change': function(obj, newValue, oldValue, eOpts){
        			Ext.Ajax.request({
					    url: 'Orders',
					    method: 'get',
					    params: {
					        stt: newValue,
					    },
					    success: function(response){
					       location.reload(true);
					    }
					});
        		}
        	}
        	
        }], 
        listeners: {
            'selectionchange': function(view, records) {
                grid.down('#editProduct').setDisabled(!records.length);
            }
        }
    });
});